// 导入JSX类型，用于类型标注
import type { JSX } from 'react';
// 导入Document类型，用于文档数据类型标注
import type { Document } from '../apis/fetchDocuments';
// 定义文档标题最大长度常量
const MAX_TITLE_LENGTH = 32;
// 定义文档内容最大长度常量
const MAX_DOC_LENGTH = 150;
// 定义DocumentViewer组件的props类型，包含文档列表
type DocumentViewerProps = {
  documentList: Document[];
};

// 定义DocumentViewer组件，接收文档列表作为参数
const DocumentViewer = ({ documentList }: DocumentViewerProps) => {
  // 定义prepend函数，用于在数组前插入一个元素
  const prepend = (array: JSX.Element[], value: JSX.Element): JSX.Element[] => {
    // 复制原数组
    const newArray = array.slice();
    // 在数组前插入新元素
    newArray.unshift(value);
    // 返回新数组
    return newArray;
  };
  // 遍历文档列表，生成对应的JSX元素数组
  let documentListElems = documentList.map((document) => {
    // 处理文档id，超出最大长度则截断并添加省略号
    const id =
      document.id.length < MAX_TITLE_LENGTH
        ? document.id
        : document.id.substring(0, MAX_TITLE_LENGTH) + '...';
    // 处理文档内容，超出最大长度则截断并添加省略号
    const text =
      document.text.length < MAX_DOC_LENGTH
        ? document.text
        : document.text.substring(0, MAX_DOC_LENGTH) + '...';
    // 返回每个文档的JSX结构
    return (
      <div key={document.id}>
        <p>{id}</p>
        <p>{text}</p>
      </div>
    );
  });
  // 在文档列表前插入标题元素
  documentListElems = prepend(
    documentListElems,
    <div key='viewer_title'>
      <p>My Documents</p>
    </div>,
  );
  // 渲染组件
  return (
    <div>
      {/* 如果有文档则显示文档列表，否则显示提示信息 */}
      {documentListElems.length > 1 ? (
        documentListElems
      ) : (
        <div>
          <p>Upload your first document!</p>
          <p>You will see the title and content here</p>
        </div>
      )}
    </div>
  );
};

// 导出DocumentViewer组件
export default DocumentViewer;
